<template>
  <div class="petinformanage">
    <div class="addpet">
      <button class="classification" @click="dialogFormVisible = true">
        添加宠物
      </button>
      <el-dialog title="添加宠物" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="name">
            <el-input v-model="ruleForm.name" placeholder="宠物名称"></el-input>
          </el-form-item>
          <el-form-item prop="species">
            <el-input v-model="ruleForm.species" placeholder="种类"></el-input>
          </el-form-item>
          <el-form-item prop="age">
            <el-input v-model="ruleForm.age" placeholder="宠物年龄"></el-input>
          </el-form-item>
          <el-form-item prop="address">
            <el-input v-model="ruleForm.address" placeholder="地址"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 宠物信息 -->
    <div id="classificationlist">
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
      >
        <el-table-column label="名字" prop="name"> </el-table-column>
        <el-table-column label="年龄" prop="age"> </el-table-column>
        <el-table-column label="地区" prop="address"> </el-table-column>
        <el-table-column label="种类" prop="petclassname"> </el-table-column>
        <el-table-column label="描述" prop="describe"> </el-table-column>
        <el-table-column label="状态" prop="state"> </el-table-column>
        <el-table-column align="right">
          <template slot="header"> 操作 </template>
          <template>
            <el-button size="mini" @click="editorFormVisible = true"
              >编辑</el-button
            >
            <el-dialog title="编辑宠物" :visible.sync="editorFormVisible">
              <el-form
                :model="editorruleForm"
                :rules="rules"
                ref="editorruleForm"
                class="demo-ruleForm"
              >
                <el-form-item prop="name">
                  <el-input
                    v-model="editorruleForm.name"
                    placeholder="宠物名称"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="species">
                  <el-input
                    v-model="editorruleForm.species"
                    placeholder="种类"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="age">
                  <el-input
                    v-model="editorruleForm.age"
                    placeholder="宠物年龄"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="address">
                  <el-input
                    v-model="editorruleForm.address"
                    placeholder="地址"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <el-button size="mini" type="danger" @click="open">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination small layout="prev, pager, next" :total="50">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "PetInforManage",
  data() {
    return {
      tableData: [],
      search: "",
      ruleForm: {
        name: "",
        age: "",
        species: "",
        address: "",
      },
      editorruleForm: {
        name: "可爱68",
        age: "2",
        species: "宠物鼠",
        address: "南华",
      },
      dialogFormVisible: false,
      editorFormVisible: false,
      rules: {
        name: [
          { required: true, message: "请输入宠物名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        age: [{ required: true, message: "请输入宠物年龄", trigger: "blur" },
         {
            pattern: /^([1-9]|(1[0-9])|20)$/,
            message: "请输入正确的年龄",
            trigger: "blur",
          },],
        species: [
          {
            required: true,
            message: "请输入宠物种类，以宠物二字开头",
            trigger: "blur",
          },
          {
            pattern: /^(?=宠物)/,
            message: "请输入正确的宠物种类",
            trigger: "blur",
          },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
    };
  },
  beforeMount() {
    // 获取数据
    this.axios.get("/petinformanage").then((res) => {
      this.tableData = res.data.petinfor;
    });
  },
  methods: {
    addvarieties() {
      this.$prompt("请输入宠物品种", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /鱼|蛇|狗|猫|鸟|龟|鼠|蜥蜴/,
        inputErrorMessage: "输入宠物品种不正确",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你的宠物品种是: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    open() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss">
.petinformanage {
  padding: 20px;
  background-color: white;
  .addpet {
    display: flex;
    justify-content: flex-end;
    .classification {
      color: #333333;
      margin: 16px;
      padding: 3px;
      font-size: 14px;
      border: none;
      border-radius: 5px;
      border: 1px solid #d3d5d7;
      cursor: pointer;
      background-color: white;
    }
  }
  #classificationlist {
    margin-bottom: 10px;
  }
}
</style>